<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="es">
<%@ include file="check-autenticacion.jsp" %> 
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Portal-2 - TP Grupo 7</title>

    <!-- Bootstrap Core CSS -->
    <link href="resources/css/bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="resources/css/shop-homepage.css" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link href="resources/css/portal.css" rel="stylesheet">    

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
	<%@ include file="nav.jsp" %> 
	
	<!-- Modal confirmar carrito -->
	<%@ include file="modal-confirmar-carrito.jsp" %> 
	
	<!-- Modal vaciar carrito -->
	<%@ include file="modal-vaciar-carrito.jsp" %> 	
    
    <!-- Modal salir -->
	<%@ include file="modal-salir.jsp" %> 
    
    <fmt:setLocale value="es_AR"/>   
    
    <!-- Page Content -->
    <div class="container">

        <div class="row">

            <div class="col-md-3">				
				<strong>Artículo</strong> <br />
				<form class="navbar-form navbar-left" role="search" method="post" action="findArticulos">
				  <div class="form-group">
				    <input type="text" class="form-control" placeholder="Nombre Artículo" size="17" name="nombreArticulo">
				  </div>
				  <button type="submit" class="btn btn-default">
				  	<img alt="Buscar!!!" src="resources/img/glyphicons_027_search.png">
				  </button>
				  <input type="hidden" name="tipoBusqueda" id="tipoBusqueda" value="1">
				 </form>
				 <br />
				 
				 <form class="navbar-form navbar-left" role="search" method="post" action="findArticulos">
				  <div class="form-group">
				    <input type="number" class="form-control" placeholder="Código Artículo" size="17" name="codigoArticulo">
				  </div>
				  <button type="submit" class="btn btn-default">
				  	<img alt="Buscar!!!" src="resources/img/glyphicons_027_search.png">
				  </button>
				  <input type="hidden" name="tipoBusqueda" id="tipoBusqueda" value="2">
				</form>
				
				<hr />
				<br />
				
				<strong>Fecha</strong> <br />
				<form class="navbar-form navbar-left" role="search" method="post" action="findArticulos">
				  <label for="fechaDesde">Fecha Desde:</label><br />
				  <div class="form-group">
				    <input type="date" class="form-control" size="17" name="fechaDesde" id="fechaDesde">
				  </div>
				  
				  <br />
				  <label for="fechaHasta">Fecha Hasta:</label>
				  <br />
				  <div class="form-group">
				    <input type="date" class="form-control" size="17" name="fechaHasta" id="fechaHasta">
				  </div>				  
				  
				  <button type="submit" class="btn btn-default">
				  	<img alt="Buscar!!!" src="resources/img/glyphicons_027_search.png">
				  </button>
				  <input type="hidden" name="tipoBusqueda" id="tipoBusqueda" value="3">
				</form>
				
				<hr />
				<br />
				
				<strong>Categoría</strong> <br />				
				<form class="navbar-form navbar-left" role="search" method="post" action="findArticulos">
				  <div class="form-group">
				  	<label for="categoria">Elija una categoría</label><br />
				  	 <select class="form-control" id="categoria" name="categoria">
				  	  <option value="Electrodomestico" selected>Electrodoméstico</option> 
					  <option value="Infantil">Infantil</option>
					  <option value="Moda">Moda</option>
					  <option value="Mueble">Mueble</option>
					</select> 
				  </div>
				  <button type="submit" class="btn btn-default">
				  	<img alt="Buscar!!!" src="resources/img/glyphicons_027_search.png">
				  </button>
				  <input type="hidden" name="tipoBusqueda" id="tipoBusqueda" value="4">
				</form>
				
				<hr />
				<br />
				
				<strong>Precio</strong> <br />
				<form class="navbar-form navbar-left" role="search" method="post" action="findArticulos">
				  <label for="precioDesde">Precio Desde:</label><br />
				  <div class="form-group">
				    <input type="number" class="form-control" size="17" name="precioDesde" id="precioDesde">
				  </div>
				  
				  <br />
				  <label for="precioHasta">Precio Hasta:</label>
				  <br />
				  <div class="form-group">
				    <input type="number" class="form-control" size="17" name="precioHasta" id="precioHasta">
				  </div>				  
				  
				  <button type="submit" class="btn btn-default">
				  	<img alt="Buscar!!!" src="resources/img/glyphicons_027_search.png">
				  </button>
				  <input type="hidden" name="tipoBusqueda" id="tipoBusqueda" value="5">
				</form>
               
            </div>

            <div class="col-md-9">

                <div class="row carousel-holder">

                    <div class="col-md-12">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img class="slide-image" src="resources/img/logo-web1.png" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="resources/img/logo-web2.png" alt="">
                                </div>
                            </div>
                            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>

                </div>
				<!-- dmerneis: Esto veo que onda -->
				<div class="row" style="background-color: #cccccc;">
					<div class="col-md-12">
						<table style="width:100%;">
							<tr>
								<td>Ordernar por: </td>
								<td>
									<div class="btn-group">
									  <button type="button" class="btn btn-primary">Precio</button>
									  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
									    <span class="caret"></span>
									    <span class="sr-only">Toggle Dropdown</span>
									  </button>
									  <ul class="dropdown-menu" role="menu">
									    <li><a href="#">Ascendente</a></li>
									    <li><a href="#">Descendente</a></li>
									  </ul>
									</div>										
								</td>
								<td>
									<div class="btn-group">
									  <button type="button" class="btn btn-primary">Categoría</button>
									  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
									    <span class="caret"></span>
									    <span class="sr-only">Toggle Dropdown</span>
									  </button>
									  <ul class="dropdown-menu" role="menu">
									    <li><a href="#">Ascendente</a></li>
									    <li><a href="#">Descendente</a></li>
									  </ul>
									</div>								
								</td>

								<td>
									<div class="btn-group">
									  <button type="button" class="btn btn-primary">Fecha</button>
									  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
									    <span class="caret"></span>
									    <span class="sr-only">Toggle Dropdown</span>
									  </button>
									  <ul class="dropdown-menu" role="menu">
									    <li><a href="#">Ascendente</a></li>
									    <li><a href="#">Descendente</a></li>
									  </ul>
									</div>
								</td>
								
								<td>
									<div class="btn-group">
									  <button type="button" class="btn btn-primary">Best Seller</button>
									  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
									    <span class="caret"></span>
									    <span class="sr-only">Toggle Dropdown</span>
									  </button>
									  <ul class="dropdown-menu" role="menu">
									    <li><a href="#">Ascendente</a></li>
									    <li><a href="#">Descendente</a></li>
									  </ul>
									</div>									
								</td>
								<td>
									<br />
									<br />
								</td>
							</tr>						
						</table>																						
					</div>		
					
					<div class="col-sm-4 col-lg-4 col-md-4">
						
					</div>		
					
					<div class="col-sm-4 col-lg-4 col-md-4">
					
					</div>										
				</div>
				<br />
                <!-- dmerneis: Esto veo que onda -->
                <div class="row">
					<c:forEach var="articulo" items="${sessionScope.articulosList}">  
						<form action="addToCarrito" method="post" id="form-${articulo.id}">
	                	    <div class="col-sm-4 col-lg-4 col-md-4">
		                        <div class="thumbnail">
		                            <img src="<c:out value="${articulo.fotoURL}"></c:out>" alt="">
		                            <div class="caption">
		                                <h4><a href="#"><c:out value="${articulo.nombre}"></c:out></a>
		                                </h4>
		                                <p>
		                                	<table>
		                                		<tr>
		                                			<td>Precio: 	 </td> <td><fmt:formatNumber value="${articulo.precio}" type="currency"/> </td>
		                                		</tr>	
		                                		<tr>	
		                                			<td>Categoría: 	 </td> <td> <c:out value="${articulo.categoria}">	</c:out>	</td>
		                                		</tr>
		                                		<tr>	
		                                			<td>Marca: 		 </td> <td> <c:out value="${articulo.marca}">		</c:out>	</td>
		                                		</tr>	
		                                		<tr>
		                                			<td>Cantidad: 	 </td> <td> <input type="number" value="1" name="cantidadItem" maxlength="4" size="2"/>	</td>
		                                		</tr>		                                				                                		
		                                		<tr>
		                                			<td>Origen: 	 </td> <td> <c:out value="${articulo.origen}">		</c:out>	</td>
		                                		</tr>
		                                		<tr>	
		                                			<td>Descripción: </td> <td> <c:out value="${articulo.descripcion}">	</c:out>	</td>
		                                		</tr>

		                                	</table>
		                                	<input type="hidden" value="${articulo.id}" 	name="idArticulo">
		                                	<input type="hidden" value="${articulo.codigo}" name="codigoArticulo">      
		                                	<input type="hidden" value="portal.jsp" name="srcFunction" id="srcFunction" />                 	
		                                </p>
		                            </div>
		                            <div class="ratings">	                                
		                                <p>
		                                	Ranking: <c:out value="${articulo.ranking}">	</c:out>								
		                                </p>
		                                
		                            </div>
		                            
		                           	<button type="submit" class="btn btn-default centada"> 
									  	<span class="glyphicon glyphicon-shopping-cart"></span> Agregar
									</button>	
		                           	<button type="button" class="btn btn-default centada" onClick="verDetalleArticulo(<c:out value="${articulo.id}"></c:out>);"> 
									  	<span class="glyphicon glyphicon-eye-open"></span> Ver Artículo
									</button>								
		                        </div>
		                    </div>
	                    </form>						
					</c:forEach>
                </div>
            </div>
        </div>

    </div>
    <!-- /.container -->

    <div class="container">

        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Porta 2 - Trabajo Práctico Obligatorio. Grupo 7
                    </p>
                </div>
            </div>
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery Version 1.11.0 -->
    <script src="resources/js/jquery-1.11.0.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="resources/js/bootstrap.min.js"></script>
    
    <script>
		function verDetalleArticulo(idArticulo){
			document.getElementById('form-'+idArticulo).action="verArticulo";
			document.getElementById('form-'+idArticulo).submit();
		};		
    </script>    
</body>

</html>
